<template>
  <div>
    <listLayoutVue>
      <template #title>稿件列表</template>

      <template #form>
        <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
          <FormItem label="所属主题">
            <Select v-model="formData.theme" class="form-item--width" clearable @on-change="handleFormSubmit">
              <Option v-for="(nt, i) of themeList" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem label="产品分类">
            <Select
              v-model="formData.product"
              class="form-item--width"
              element-id="select2"
              clearable
              @on-change="handleFormSubmit"
            >
              <Option v-for="(nt, i) of productList" :key="i" :value="nt.key">{{ nt.value }}</Option>
            </Select>
          </FormItem>

          <FormItem>
            <template #label>
              <KeywordsSelect :keyword.sync="keyword"></KeywordsSelect>
            </template>
            <Input
              v-model="formData[keyword.key]"
              :label-width="60"
              placeholder="请输入"
              class="form-item--width"
              size="large"
              clearable
            ></Input>
          </FormItem>

          <FormItem label="时间范围" class="width-auto">
            <Select v-model="formData.timeType" class="form-item--width" clearable @on-change="handleTimeTypeChange">
              <Option v-for="(it, i) of dateOptions" :key="i" :value="it.key">{{ it.value }}</Option>
            </Select>

            <DatePicker
              v-show="formData.timeType === '自定义'"
              type="daterange"
              placeholder="请选择"
              style="width: 210px"
              @on-change="handleTimeRange"
            ></DatePicker>
          </FormItem>

          <Button class="btn-search" type="primary" html-type="submit">查询</Button>
        </Form>
      </template>

      <template #table>
        <CommonTablePage
          :loading="tableLoading"
          :columns="columns"
          :tableData="tableData"
          :total="pagination.total"
          @on-sort-change="handleTableSort"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        ></CommonTablePage>
      </template>
    </listLayoutVue>

     <ModalConfrim :visible.sync="visible.fetch" title="取稿" @on-ok="modalFetchOk" @on-no="modalFetchCancel">
      <p class="text-center f14">是否取稿？</p>
    </ModalConfrim>
  </div>
</template>

<script>
// components
import KeywordsSelect from '@/components/common/KeywordsSelect/KeywordsSelect'
import listLayoutVue from '@/components/listLayout/listLayout.vue'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalConfrim from '@/components/common/ModalConfrim/ModalConfrim'
//util
import { createCommonPagination, createForm } from '@/utils/service.js'
import { createColumns } from './service'
export default {
  name: 'AllManuscript',

  components: { listLayoutVue, CommonTablePage, KeywordsSelect, ModalConfrim },

  data() {
    return {
      formData: createForm(),
      keyword: { key: 'title', value: '标题' },

      tableLoading: false,
      columns: createColumns(this),
      tableData: [{}, {}],

      pagination: createCommonPagination(),

      visible: { fetch: false }
    }
  },

  computed: {
    themeList() {
      return this.$store.getters.themeList
    },
    productList() {
      return this.$store.getters.productList
    },
  },

  methods: {
    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit() {},

    handleTableSort({ key, order }) {
      // console.log(123, column, key, order)
      if (order === 'normal') {
        this.formData.orderField = 'createTime'
        this.formData.desc = true
      } else {
        this.formData.orderField = key
        this.formData.desc = order === 'desc'
      }
      this.handleFormSubmit()
    },

    handleFeatManu(row) {
      console.log(row)
      this.visible.fetch = true
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit()
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit()
    },

    modalFetchOk() {
      console.log('modalFetchOk')
    },

    modalFetchCancel() {
      console.log('modalFetchCancel')
    }
  },
}
</script>

<style lang="less" scoped></style>
